<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>水果列表</div>
        <ul>
            <li v-for='( item,index) in myFruits'>
                <span>水果名称:{{item.ename}}</span> <br>
                <span>水果价格:{{item.price}}元</span> <br>
                <span>-----</span>
            </li>

        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
           要求:根据myFruits数组元素的个数, 循环渲染对应个数的li结构, 并填充好对应的数据
               */
        var vm = new Vue({
            el: '#app',
            data: {
                myFruits: [{
                    id: 1,
                    ename: '苹果',
                    price: 15
                }, {
                    id: 2,
                    ename: '橙子',
                    price: 35
                }, {
                    id: 3,
                    ename: '香蕉',
                    price: 5
                }]
            }
        });
    </script>
</body>

</html>